<template>
  <div class="module_">
    <div class="flex mb8" >
      <div class="block flex-1 mr8 flex-ver content-box" >
        <div class="block_title flex-align-center">
          <h3 class="pl16"><i class="iconfont icon-wodeshiwu mr8"></i>我的事务</h3>
        </div>
        <div class="pl16 flex-1 flex-ver scroll"  v-loading='affairLoading'>
          <ul v-if="affairInfo.length > 0" class="c-blue mt8 module_box" ref="scroll_box">
            <li class="mb16 li" v-for="(item,i) in affairInfo" :key='"affair" + i'>
              <el-popover
                v-if="showPopover(item.type)"
                placement="right" trigger="click">
                <el-table :data="gridData" v-loading="tableLoading" max-height="500" @row-click="(row)=>rowClick(row,item.type)" row-class-name='shou'>
                  <el-table-column v-for="v in showTableHeader(item.type)" :key="v.prop"  show-overflow-tooltip 
                    :width="v.width" :prop="v.prop" :label="v.label">
                  </el-table-column>
                </el-table>
                <span :ref="item.tag ? 'tag':''" slot="reference" class="shou" @click="showDetail(item)">您有{{item.count}}条来自{{item.type}}的信息{{adminShow?"待审核":""}}</span>
              </el-popover>
              <span v-else class="shou" @click="goLink(item.type)">您有{{item.count}}条来自{{item.type}}的信息{{adminShow?"待审核":""}}</span>
            </li>
          </ul>
          <div v-else-if="affairInfo.length === 0 && !affairLoading" class="flex-1 flex-center">暂无事务信息！</div>
        </div>
      </div>
      <div class="block flex-1 flex-ver content-box">
        <div class="block_title flex-align-center">
          <h3 class="pl16"> <i class="iconfont icon-xiaoxiyujing mr8"></i>消息与预警</h3>
        </div>
        <div class="pl16 flex-1 flex-ver scroll" v-loading='messageLoading'>
          <ul v-if="messageInfo.length > 0" class="c-blue mt8 module_box">
            <li class="mb16 li" v-for="(item,i) in messageInfo" :key='"message" + i'><span class="shou" @click="goLink(item.type)">您有{{item.count}}条来自{{item.type}}的信息</span></li>
          </ul>
          <div v-else-if="messageInfo.length === 0 && !messageLoading" class="flex-1 flex-center">暂无消息与预警！</div>
        </div>
      </div>
    </div>
    <div class="flex flex-1">
      <div class="block flex-1 " >
        <div class="block_title flex-align-center mb8">
          <h3 class="pl16"> <i class="iconfont icon-keyandongtai mr8"></i>数据统计</h3>
        </div>
        <div class="pl16 flex" v-loading='scientificLoading'>
          <div class="mt24">
            <div class="block_white box mb8" @click="goLink('纵向项目')">
              <div class="mr16 flex-align-center">
                <svg class="icon f-26" aria-hidden="true" slot="image">
                  <use xlink:href="#icon-keyanxiangmu1"></use>
                </svg>
              </div>
              <div>
                <!-- <p class="mb8 ws-nowrap"><span class="block_white--num">{{statistics.projects_count}}</span><span class="block_white--unit">项</span></p> -->
                <p class="mb8 ws-nowrap">
                   <countTo class="block_white--num" :startVal='0' :endVal='statistics.projects_count' :duration='2000'></countTo>
                  <span class="block_white--unit">项</span>
                </p>
                <p class="block_white--footer">科研项目</p>
              </div>
            </div>
            <div class="block_white box mb8" @click="goLink('成果申报')">
              <div class="mr16 flex-align-center">
                <svg class="icon f-26" aria-hidden="true" slot="image">
                  <use xlink:href="#icon-chengguo1"></use>
                </svg>
              </div>
              <div>
                <p class="mb8 ws-nowrap"><countTo class="block_white--num" :startVal='0' :endVal='statistics.results_count' :duration='2000'></countTo><span class="block_white--unit">个</span></p>
                <p class="block_white--footer">科研成果</p>
              </div>
            </div>
            <div class="block_white box mb8" @click="goLink('学术任职')">
              <div class="mr16 flex-align-center">
                <svg class="icon f-28" aria-hidden="true" slot="image">
                  <use xlink:href="#icon-xueshu"></use>
                </svg>
              </div>
              <div>
                <p class="mb8 ws-nowrap"><countTo class="block_white--num" :startVal='0' :endVal='statistics.academic_count' :duration='2000'></countTo><span class="block_white--unit">个</span></p>
                <p class="block_white--footer">学术任职</p>
              </div>
            </div>
            <div class="block_white box mb8" @click="goLink('项目经费')">
              <div class="mr16 flex-align-center">
                <svg class="icon f-26" aria-hidden="true" slot="image">
                  <use xlink:href="#icon-jingfeiguanli"></use>
                </svg>
              </div>
              <div>
                <p class="mb8 ws-nowrap"><countTo class="block_white--num" :startVal='0' :endVal='statistics.project_funds' :duration='2000'></countTo><span class="block_white--unit">万元</span></p>
                <p class="block_white--footer">项目经费</p>
              </div>
            </div>
          </div>
          <div class="flex-1">
            <div ref="SCEchart" class="SCEchart">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ApihomeAffair,ApihomeMessage,ApiScientific,ApiStatistics,ApihomeAffairProject,
        ApihomeAffairContract,ApihomeAffairEvaluatefunds} from "@/api"
import {obj1,obj2,fundPath} from '@/assets/js/path.js'
import {adminShow,throttle} from '@/utils'
import countTo from 'vue-count-to';
import {tip,tableHeader} from '../js/home'
const echarts = require('echarts')
export default {
  components:{
    countTo
  },
  data(){
    return{
      adminShow:adminShow(),
      affairInfo: [],
      affairLoading: false,
      messageInfo: [],
      messageLoading:false,
      scientificInfo: {
        lastYear:{},
        thisYear:{}
      },
      statistics:{
        projects_count:0,
        results_count:0,
        academic_count:0,
        project_funds:0,
      },
      scientificLoading:false,
      tableLoading: false,
      gridData: [],
    }

  },
  mounted(){
    this.getAffairInfo()
    this.getMessageInfo()
    this.getScientificInfo()
    this.getStatistics()
  },
  methods:{
    showTableHeader(ele){
      return tableHeader[ele]
    },
    showPopover(ele){
      return tip.includes(ele)
    },
    rowClick(row,type){
      const home_left_top = {
        scrollTop:this.$refs.scroll_box.scrollTop,
        type:type
      }
      sessionStorage.setItem('home_left_top',JSON.stringify(home_left_top))
      if(type === "学科发展经费"){
        this.$router.push(fundPath[type] + row.evaluate_rank_id)
      }else{
        this.$router.push(fundPath[row.type] + row.id)
      }
    },
    showDetail(item){
      this.tableLoading = true
      const api = {
        '纵向项目经费': ApihomeAffairProject,
        '横向项目经费': ApihomeAffairContract,
        '学科发展经费': ApihomeAffairEvaluatefunds
      }[item.type]
      api().then(res=>{
        this.gridData = res.data
      }).finally(()=>{
        this.tableLoading = false
      })
    },
    getStatistics(){
      ApiStatistics().then(res => {
        this.statistics = res.data
      })
    },
    getSCE(SCEoption) {
      const chart = echarts.init(this.$refs.SCEchart)
      chart.setOption(SCEoption)
      window.onresize = throttle(function(){
        chart.resize()
      },50)
    },
    //事务信息
    getAffairInfo(){
      this.affairLoading = true
      ApihomeAffair().then(({data}) => {
        if(sessionStorage.getItem('home_left_top')){
          const {scrollTop,type} = JSON.parse(sessionStorage.getItem('home_left_top') || {})
          sessionStorage.removeItem('home_left_top')
          let flag = false
          data.forEach(ele => {
            if(ele.type === type){
              flag = true
              ele.tag = true
            }
          });
          this.affairInfo = data
          this.$nextTick(()=>{
            this.$refs.scroll_box.scrollTop = scrollTop
            if(flag) this.$refs.tag[0].click()
          })
        }else{
          this.affairInfo = data
        }        
      }).finally(()=>{
        this.affairLoading = false
      })
    },

    //消息与预警
    getMessageInfo(){
      this.messageLoading = true
      ApihomeMessage().then(({data}) => {
        this.messageInfo = data
      }).finally(()=>{
        this.messageLoading = false 
      })
    },

    getScientificInfo(){ 
      this.scientificLoading = true
      const SCEoption = {
        tooltip: {
          trigger: 'axis',
          // formatter: "{a} <br/>{b} : {c}"
        },
        legend: {
          data: ['去年','今年'],
          left: 'center',
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis:{
          type: 'category',
          data: ['纵向项目', '横向项目','国际合作', '成果申报', '成果获奖', '科研论文', '专利成果', '成果转化'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            // margin: 14,
            // height: 70,
            // interval: 0,
            textStyle: {
              fontSize: 14,
              color: "#333333"
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameLocation:'end',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#333333"
            }
          }
        },
        series: [{
          name: '去年',
          type: 'bar',
          data: [],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#83bff6'
            },
            emphasis: {
              color: '#2378f7'
            }
          }
        },{
          name: '今年',
          type: 'bar',
          barGap: "30%",
          data: [],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: 'rgb(246,145,146)'
            },
            emphasis: {
              color: 'rgb(246,100,110)'
            }
          }
        }]
      }
      ApiScientific().then(({data}) => {
        const {lastYear,thisYear} = data
        SCEoption.series[0].data = lastYear
        SCEoption.series[1].data = thisYear
      }).finally(()=>{
        this.getSCE(SCEoption)
        this.scientificLoading = false 
      })
    },
    goLink(key){
      if(this.adminShow){
        this.$router.push(obj1[key])
      }else{
        let obj = {...obj1,...obj2}
        this.$router.push(obj[key])
      }
    },
  },
  destroyed(){
    window.onresize = null
  }
}
</script>

<style lang='less' scoped>
.block{
  border:1px solid #B5B5B5 ;
  border-radius: 8px;
  overflow: hidden;
}
.block_title{
  width: 100%;
  height: 40px;
  // border-radius: 5px  5px 0 0;
  // overflow: hidden;
  background: #28729D;
  color: white;
}
.module_box{
  padding-left:24px;
  overflow: auto;
  .li{
    list-style: disc;
  }
}
.content-box{
  height: 354px;
}
.achievements{
  padding-left:24px;
  li{
    margin-bottom: 32px;
    list-style: disc;
    cursor: pointer;
  }
}
.block_white{
  padding: 8px 24px;
  display: flex;
  cursor: pointer;
  .block_white--num{
    font-size: 24px;
    font-weight: bold;
    color: #666666;
    // margin-right: 8px;
  }
  .block_white--unit{
    font-size: 14px;
    color: #888888;
    margin-bottom: 4px;
  }
  .block_white--footer{
    font-size: 16px;
    color: #666666;
    white-space: nowrap;
  }
}
.SCEchart{
  width: 80%;
  min-width: 650px;
  height: 80%;
  min-height: 350px;
  margin: 0 auto;
}
.scroll{
  overflow: auto;
  ul::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  ul::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #909399;
  }

  ul::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #e8e8e8;
  }
}

</style>